import React, { useCallback } from 'react'
import { Image, Text, View } from '@tarojs/components'
import Images from '@ASSET/Images'
import Taro from '@tarojs/taro'
import { getPlatform } from '@UTILS/common'
import style from './PlanExplore.module.scss'

const { isWX } = getPlatform()
const PlanExplore: React.FC = () => {
  const onClick = useCallback(() => {
    Taro.previewImage({
      current: Images.qrCode.official_account_home,
      urls: [Images.qrCode.official_account_home]
    })
  }, [])
  const tips = `专业1v1服务指导\n长按${isWX ? '识别' : '保存'}添加`
  return (
    <View className={style.container}>
      <View className={style.titleContainer}>
        <View className={style.line} />
        <Text className={style.title}>探索</Text>
      </View>
      <View className={style.cardContainer}>
        <View className={style.card}>
          <Image src={Images.managePlan.icon_guide_explore} className={style.icon} />
          <Text className={`${style.black} ${style.cardTitle1}`}>疼爱健康公众号</Text>
          <Text className={style.grey}>{'疼痛医生科普\n了解专业疼痛知识'}</Text>
          <View className={style.btnContainer} onClick={onClick}>
            <Text className={style.btnText}>立即关注</Text>
          </View>
        </View>
        <View className={style.card}>
          <Text className={`${style.black} ${style.cardTitle2}`}>疼爱管理师</Text>
          <Text className={style.grey}>
            {tips}
          </Text>
          <View className={style.icon2Container}>
            <Image src={Images.qrCode.image_qr_code_home_plan} className={style.icon2} showMenuByLongpress />
          </View>
        </View>
      </View>
    </View>
  )
}

export default PlanExplore
